<app-common-header [title]="'myAccount.installment_page.title' | translate" [routerUrl]="'/tabs/myAccount'"></app-common-header>
<ion-content>
    <div class="content">
        <div class="conten_header">
            <ion-grid>
                <ion-row>
                    <ion-col size="12">
                        <ion-segment value="bill" (ionChange)="selectedOptions($event)">
                            <ion-segment-button value="bill">
                                <ion-label class="label_text">
                                    <svg class="icon_title" aria-hidden="true">
                                        <use xlink:href="#iconbill"></use>
                                    </svg>
                                   {{'myAccount.installment_page.installment_bill.installment_bill_option' | translate}}
                                </ion-label>
                            </ion-segment-button>
                            <ion-segment-button value="paymentOrder">
                                <ion-label class="label_text">
                                    <svg class="icon_title" aria-hidden="true">
                                        <use xlink:href="#iconpaymentorder"></use>
                                    </svg>
                                    {{'myAccount.installment_page.installment_payment_order.installment_payment_order_option' | translate}}
                                </ion-label>
                            </ion-segment-button>
                        </ion-segment>
                        <!--   <ion-button fill="clear" expand="full" size="default">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#iconbill"></use>
                        </svg>
                        Bill
                    </ion-button> -->
                    </ion-col>
                </ion-row>
            </ion-grid>
        </div>
        <!-- bill -->
        <div [hidden]="selected" class="bill_content_body">
            <div class="item">
                <ion-grid>
                    <ion-row>
                        <ion-col size="12">
                            <ion-grid style="background-color: #fff;">
                                <ion-row>
                                    <ion-col size="12">
                                        <ion-text color="" class="text_title">
                                                {{'myAccount.installment_page.installment_bill.request_amount' | translate}}
                                        </ion-text>
                                    </ion-col>
                                </ion-row>
                                <ion-row class="text_amt">
                                    <ion-col size="12">
                                        $
                                        <ion-text color="">
                                            5,000.00
                                        </ion-text>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col size="6" class="ion-text-left">
                                        <ion-text color="">
                                                {{'myAccount.installment_page.installment_bill.current_balance' | translate}}
                                        </ion-text>
                                    </ion-col>
                                    <ion-col size="6" class="ion-text-right">
                                        <ion-text color="">
                                            $ 5,100.00
                                        </ion-text>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col size="6" class="ion-text-left">
                                        <ion-text color="">
                                                {{'myAccount.installment_page.installment_bill.maximum_instalments' | translate}}
                                        </ion-text>
                                    </ion-col>
                                    <ion-col size="6" class="ion-text-right">
                                        <ion-text color="">
                                            $ 5,100.00
                                        </ion-text>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col size="12">
                            <p>
                                <ion-text color="medium">
                                        {{'myAccount.installment_page.installment_bill.comment' | translate}}
                                </ion-text>
                            </p>
                        </ion-col>
                    </ion-row>
                    <ion-row class="ion-margin-top">
                        <ion-col size="12">
                            <div class="ion-float-right" (click)="toAprCalc()">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#iconcalculator"></use>
                                </svg>
                                <ion-text color="" class="font_weight">
                                        {{'myAccount.installment_page.installment_bill.apr_calculate' | translate}}
                                </ion-text>
                            </div>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col size="12">
                            <ion-grid style="background-color: #fff;">
                                <ion-row>
                                    <ion-col size="12">
                                        <ion-text color="" class="text_title">
                                                {{'myAccount.installment_page.installment_bill.payment_schedule' | translate}}
                                        </ion-text>
                                    </ion-col>
                                </ion-row>
                                <ion-row class="border_bottom">
                                    <ion-col size="12">
                                        <div (click)="toPaymentSchedule($event)">
                                            <ion-text color="" class="payment_font">
                                                12 &nbsp;    {{'myAccount.installment_page.installment_bill.periods' | translate}}
                                            </ion-text>
                                            <svg class="icon" aria-hidden="true">
                                                <use xlink:href="#iconpage-right"></use>
                                            </svg>
                                        </div>
                                    </ion-col>
                                </ion-row>
                               <!--  <ion-row class="">
                                    <ion-col size="12">
                                        <ion-text color="" class="payment_font">
                                            Periods
                                        </ion-text>
                                    </ion-col>
                                </ion-row> -->
                                <ion-row>
                                    <ion-col size="6" class="ion-text-left">
                                        <ion-text color="">
                                                {{'myAccount.installment_page.installment_bill.principal' | translate}} /
                                            <span>  {{'myAccount.installment_page.installment_bill.monthly' | translate}} </span>
                                        </ion-text>
                                    </ion-col>
                                    <ion-col size="6" class="ion-text-right">
                                        <ion-text color="" class="payment_font">
                                            $ 447.67
                                        </ion-text>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col size="6" class="ion-text-left">
                                        <ion-text color="">
                                                {{'myAccount.installment_page.installment_bill.fee' | translate}} /
                                            <span>  {{'myAccount.installment_page.installment_bill.monthly' | translate}} </span>
                                        </ion-text>
                                    </ion-col>
                                    <ion-col size="6" class="ion-text-right">
                                        <ion-text color="" class="payment_font">
                                            $ 31.86
                                        </ion-text>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col class="icon_center" size="1">
                            <ion-icon name="radio-button-off-outline" class="agreement_icon" *ngIf="consentAgreement"
                                (click)="changeConsentAgreement()"></ion-icon>
                            <ion-icon name="checkmark-circle" class="agreement_icon" *ngIf="!consentAgreement"
                                (click)="changeConsentAgreement()"></ion-icon>
                        </ion-col>
                        <ion-col size="11" class="ion-align-self-start">
                            <ion-label class="">
                                <ion-text color="" class="agreement_context">
                                        {{'myAccount.installment_page.installment_bill.agreement' | translate}}
                                    <a class="agreement_text" [routerLink]="[ '/tabs/myAccount/comm-agreement']">
                                        {{'myAccount.installment_page.installment_bill.agreement_text' | translate}}
                                    </a>
                                </ion-text>
                            </ion-label>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
        </div>
        <!-- payment order -->
        <div [hidden]="!selected" class="content_body">
            <div>
                <ion-grid>
                    <ion-row class="item_color" *ngFor="let item of paymentOrders;let last=index;">
                        <ion-col size="12">
                            <ion-grid class="" [ngClass]="{'border': last==(paymentOrders.length-1) ? false:true}">
                                <ion-row>
                                    <ion-col size="6" class="">
                                        <ion-text class="item_tilte">
                                            {{item.name}}
                                        </ion-text>
                                    </ion-col>
                                    <ion-col size="6" class="">
                                        <div class="ion-float-end item_tilte ion-text-justify" (click)="openRadio(item)">
                                            <ion-text>
                                                $ {{item.amt}}
                                            </ion-text>
                                            <div [hidden]="!item.selected" class="ion-float-right ion-padding-start">
                                                <svg class="icon_title" aria-hidden="true">
                                                    <use xlink:href="#iconfill-confirmed"></use>
                                                </svg>
                                            </div>
                                            <div [hidden]="item.selected" class="ion-float-right ion-padding-start">
                                                <ion-icon name="radio-button-off-outline" class="icon_size">

                                                </ion-icon>
                                            </div>
                                        </div>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col size="12" class="">
                                        <ion-text class="item_date">
                                            {{item.date}}
                                        </ion-text>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
        </div>
    </div>
</ion-content>
<!-- bill -->
<ion-tab-bar  [hidden]="selected">
        <div class="bottom_btn">
                <ion-grid class="padding_clean">
                    <ion-row>
                        <ion-col size="12" class="padding_clean">
                            <ion-button expand="full" color="lightOrange" (click)="toPaymentPassword($event)"
                                [disabled]="consentAgreement">
                                {{'myAccount.installment_page.installment_bill.button' | translate}}
                            </ion-button>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
</ion-tab-bar>
<!-- payment order -->
<ion-tab-bar  [hidden]="!selected">
        <div class="item_color bottom_btn">
                <ion-grid>
                    <ion-row class="">
                        <ion-col size="12">
                            <div class="bottom">
                                <div class="left_content">
                                    <div>
                                        <ion-text color="">    {{'myAccount.installment_page.installment_payment_order.total_request_amount' | translate}} </ion-text>
                                    </div>
                                    <div>
                                        <ion-text color=""> $ {{totalAmt}} ({{selectedAmt.length}} Txns) </ion-text>
                                    </div>
                                </div>
                                <div class="submit_btn">
                                    <ion-button color="" size="default" expand="block" [disabled]="paymentOrderBtnDisable" color="lightOrange" (click)="toPaymentPassword($event)">
                                            {{'myAccount.installment_page.installment_payment_order.button' | translate}}
                                    </ion-button>
                                </div>
                            </div>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </div>
</ion-tab-bar>